<template>
  <el-card class="salesAndVisited">
    <div class="salesAndVisitedHeader">
      <el-tabs v-model="salesVisitedTab">
        <el-tab-pane label="销售额" name="sales" />
        <el-tab-pane label="访问量" name="visited" />
      </el-tabs>
    </div>
    <div class="salesAndVisitedMiddle">
      <el-radio-group v-model="radio1" size="default">
        <el-radio-button label="本日" />
        <el-radio-button label="本周" />
        <el-radio-button label="本月" />
        <el-radio-button label="本年" />
      </el-radio-group>
      <el-date-picker
        v-model="value1"
        type="datetimerange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        range-separator="至"
        :default-time="defaultTime1"
      />
    </div>
    <SaleVisitedChart
      :data="data"
      :dataAxis="dataAxis"
      :salesVisitedTab="salesVisitedTab"
    />
  </el-card>
</template>

<script lang="ts">
export default {
  name: "SaleVisited",
};
</script>

<script lang="ts" setup>
import SaleVisitedChart from "./sale-visited-chart.vue";
import { computed, ref } from "vue";
const value1 = ref("");
const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0); // '12:00:00'
const radio1 = ref("New York");

const props = defineProps<{
  orderFullYearAxis: string[];
  orderFullYear: number[];
  userFullYearAxis: string[];
  userFullYear: number[];
}>();
const salesVisitedTab = ref("sales");
const data = computed(() => {
  return salesVisitedTab.value === "sales"
    ? props.orderFullYear
    : props.userFullYear;
});
const dataAxis = computed(() => {
  return salesVisitedTab.value === "sales"
    ? props.orderFullYearAxis
    : props.userFullYearAxis;
});
</script>

<style scoped lang="scss">
.salesAndVisited :deep() {
  .el-card__body {
    padding: 5px 25px 20px 25px;
  }
  .el-tabs__item {
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #000;
    padding: 0;
    width: 90px;
    margin: 0 5px;
  }
  &.is-active {
    background-color: #eee;
  }
}

.salesAndVisitedHeader {
  position: relative;
}
.salesAndVisitedMiddle {
  position: absolute;
  right: 40px;
  top: 221px;
  height: 60px;
  display: flex;
  align-items: center;
}
</style>
